<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.transposing.code')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.locationshiftcode"></el-input>
          </el-form-item>
          <el-form-item label="SKU" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.creator')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.creator" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.state')" :label-width="formLabelWidth">
            <el-select v-model="formInline.state" :placeholder="$t('m.choose')">
              <el-option v-for="item in states" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
            <el-button type="primary" @click="add" v-if="hasPermission('add')">{{$t('m.add')}}</el-button>
            <el-button type @click="print" v-if="hasPermission('print')">{{$t('m.print')}}</el-button>
            <el-upload
            :show-file-list="false"
            :with-credentials="true"
            style="display:inline-block;margin-left:10px"
            class="upload-demo"
            :headers="myHeaders"
            :action="uploadurl"
            :on-success="uploadSuccess"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :auto-upload="true"
          >
            <el-button v-if="hasPermission('importexcel')">{{$t('m.transposing.importexcel')}}</el-button>
          </el-upload>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          stripe
          empty-text
          fits
          v-loading="tableLoading"
          class="single-select-table"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="tableRowClassName"
          @row-click="rowClick"
          @selection-change="handleSingleSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column
            align="center"
            prop="locationshiftcode"
            :label="$t('m.transposing.code')"
          >
            <template slot-scope="scope">
              <template>
                <el-button
                  type="text"
                  @click.stop="toInfo(scope.row.locationshiftid)"
                >{{scope.row.locationshiftcode}}</el-button>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="timelimit" :label="$t('m.transposing.limit')">
            <!-- <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.ordertype==1"
              >{{$t('m.transposing.limit1')}}</el-button>
              <el-button
                size="mini"
                type="warning"
                v-if="scope.row.ordertype==2"
              >{{$t('m.transposing.limit2')}}</el-button>
              <el-button
                size="mini"
                type="success"
                v-if="scope.row.ordertype==3"
              >{{$t('m.transposing.limit3')}}</el-button>
            </template>-->
          </el-table-column>
          <el-table-column :label="$t('m.state')" width="100" align="center" prop="state">
            <template slot-scope="scope">{{scope.row.state|stateFilter(lan)}}</template>
          </el-table-column>
          <el-table-column :label="$t('m.creator')" align="center" prop="creator"></el-table-column>
          <el-table-column align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
          <el-table-column align="center" prop="shippingaddress" :label="$t('m.operation')">
            <template slot-scope="scope">
              <div class="btns" style="text-align:center">
                <el-button
                type="primary"
                @click.stop="edit(scope.row)"
                size="mini"
                v-if="hasPermission('table-edit')"
              >{{$t('m.edit')}}</el-button>
              <el-button
                type="primary"
                @click.stop="complete(scope.row)"
                size="mini"
                v-if="hasPermission('table-transposed')"
              >{{$t('m.transposing.complete')}}</el-button>
              <el-button
                type="danger"
                @click.stop="deleteRow(scope.row)"
                size="mini"
                v-if="hasPermission('table-cancel')"
              >{{$t('m.cancel')}}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="sizes, prev, pager, next, jumper"
          :page-sizes="pageSizeList"
          :page-size="rowSize"
          :current-page="page"
          :total="totalRows"
          @current-change="currentChangeInitFn"
          @size-change="handleSizeChangeInitFn"
        ></el-pagination>
      </el-col>
    </el-row>
    <!-- 打印 start -->
    <transPrint
      :popupLoading="popupLoading"
      v-if="printVisible"
      :popupVisible="printVisible"
      :detail="popupData"
      @close="printVisible=false"
    ></transPrint>
    <!-- 打印dialog end -->

    <!-- 批量移位提示dialog start -->
    <transposingTipsPopup
      v-if="transposingTipsPopupVisible"
      :popupVisible="transposingTipsPopupVisible"
      :detail="transposingTipsPopupData"
      @close="transposingTipsPopupVisible = false"
    ></transposingTipsPopup>
    <!-- 批量移位提示dialog end -->
  </div>
</template>

<script>
import common from '@/utils/common'
import transPrint from './print-popup'
import transposingTipsPopup from './transposing-tips-popup'
export default {
  data(){
    return {
      formInline:{
        locationshiftcode:'',
        state:null,
        creator:'',
        productspeccode:''
      },
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'180px',
      printVisible:false,
      popupLoading:true,
      popupData:{},
      myHeaders:{},
      uploadurl:`${window._config_.baseUrl}/excel/importlocationshift`,
      transposingTipsPopupVisible:false
    }
  },
  components:{ transPrint,transposingTipsPopup },
  watch:{},
  filters:{
    // 1 待处理 2 待拣货 3 拣货中 4 已完成 5 已取消
    stateFilter(value, lan){
      return [
        lan('m.transposing.state1'),
        lan('m.transposing.state2'),
        lan('m.transposing.state3')
      ][value - 1]
    }
  },
  computed:{
    states(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:1,
          label:this.$t('m.transposing.state1')
        }
        // ,
        // {
        //   id: 2,
        //   label: this.$t('m.transposing.state2')
        // },
        // {
        //   id: 3,
        //   label: this.$t('m.transposing.state3')
        // }
      ]
    },
    ordertype(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:1,
          label:this.$t('m.out.ordertype1')
        },
        {
          id:2,
          label:this.$t('m.out.ordertype2')
        }
      ]
    }
  },
  methods:{
    // 导入Excel 批量移位
    uploadSuccess(response){
      if (response.respHeader.resultCode === 9999){
        this.$message({
          message:this.$t('m.import')+this.$t('m.log.error'),
          type:'error'
        })
      } else {
        let data = response.respBody.res
        let content = data.split(';')
        if (!content[content.length - 1]) content.pop()
        this.transposingTipsPopupData = { content }
        this.transposingTipsPopupVisible = true
        this.init()
      }
    },
    lan(arg){
      return this.$t(arg)
    },
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/locationshift/page',
        params:{
          page:this.page,
          rows:this.rowSize,
          locationshiftcode:this.formInline.locationshiftcode,
          creator:this.formInline.creator,
          state:this.formInline.state,
          productspeccode:this.formInline.productspeccode
        }
      }).then(({data})=> {
        for (let i = 0; i < data.records.length; i++){
          data.records[i].createdate = common.timestampToTime(
            data.records[i].createdate
          )
        }
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    },
    search(){
      this.page = 1
      this.init()
    },
    close(formName){
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
      this.init()
    },
    add(){
      let obj = {
        componentName:'addTransposing',
        option:'add'
      }
      //把参数传给父组件的switchComponent，然后父组件再把obj通过props传给子组件使用（add.vue里面用到了）
      this.$emit('switchComponent', obj)
      // let routeData = this.$router.resolve({
      //   path: "addTranposing",
      //   query: { opt: "add" }
      // });
      // window.open(routeData.href, "_self");
    },

    complete(row){
      this.$confirm(
        this.$t('m.transposing.iscomplete'),
        this.$t('m.transposing.complete'),
        {
          confirmButtonText:this.$t('m.confirm'),
          cancelButtonText:this.$t('m.cancel'),
          center:true
        }
      ).then(() => {
        this.$axios({
          method:'get',
          url:'/locationshift/accomplish',
          params:{
            id:row.locationshiftid
          }
        }).then(()=> {
          this.$message({
            type:'success',
            message:this.$t('m.transposing.success')
          })
          this.init()
        })
      })
    },
    edit(row){
      let obj = {
        componentName:'addTransposing',
        id:row.locationshiftid,
        option:'edit'
      }
      this.$emit('switchComponent', obj)
      // var locationshiftid = row.locationshiftid;
      // let routeData = this.$router.resolve({
      //   path: "addTranposing",
      //   query: { id: locationshiftid, opt: "edit" }
      // });
      // window.open(routeData.href, "_self");
    },
    deleteRow(row){
      this.$confirm(this.$t('m.transposing.isdelete'), this.$t('m.cancel'), {
        confirmButtonText:this.$t('m.confirm'),
        cancelButtonText:this.$t('m.cancel'),
        center:true
      }).then(() => {
        this.$axios({
          method:'delete',
          url:`/locationshift/${row.locationshiftid}`
        }).then(()=> {
          this.$message({
            type:'success',
            message:this.$t('m.deleteSuccess')
          })
          this.init()
        })
      })
    },
    toInfo(id){
      let obj = {
        componentName:'transInfo',
        parentName:'transposing',
        id:id
      }
      this.$emit('switchComponent', obj)
    },
    getInfo(){
      this.$axios({
        method:'get',
        url:`/locationshift/${this.tableRowSelected[0].locationshiftid}`
      }).then(({data})=> {
        this.popupData = data
        this.popupLoading = false
      })
    },
    print(){
      if (this.tableRowSelected.length < 1){
        this.$message(this.$t('m.chooseprint') + this.$t('m.transposing.name'))
      } else {
        this.printVisible = true
        this.getInfo()
      }
    }
  },
  activated(){
    this.init()
    this.myHeaders = {
      token:this.$store.state.basicInfo.userInfo.token
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>